<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link href="../../css/mui.plus.css" rel="stylesheet"/>
    <link href="../../css/mui.picker.min.css" rel="stylesheet" />
    <link href="../../css/mui.poppicker.css" rel="stylesheet" />
    <style>
    	.mui-radio input[type="radio"]:before, .mui-checkbox input[type="checkbox"]:before {
    		font-size: 20px;
    	}
    	.oe-btn-pick {
    	    width: 100%;
		    height: 100%;
		    padding-right: 29px;
		    text-align: right;
		    background-color: #fff;
        }
        .pat-scale.mui-navigate-right:after {
        	content: '\e468';
        	font-size: 30px;
        	color: #30B497;
        	font-weight: bold;
        }
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav pri-bar">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">添加术后随访</h1>
    </header>
    <footer class="mui-bar mui-bar-footer" style="padding: 0;height: 50px;">
        <button type="button" id="btnSave" class="mui-btn mui-btn-primary mui-btn-block" style="padding:10px 0;">确认邀请</button>
    </footer>
    <div class="mui-content oe-helper">
        <form class="mui-input-group">
        	<div class="mui-input-row">
                <label>姓名</label>
                <input id="txtName" type="text" name="rec_name" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>手术名称</label>
                <input id="txtSurName" type="text" name="rec_name" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label style="position: absolute;z-index: 2;">手术时间</label>
                <button id="showDateBtn" type="button" class="mui-btn oe-btn-pick" data-options='{"type":"date","beginYear":2016,"endYear":2020}'>请选择</button>
            </div>
            <div class="mui-input-row">
                <label>诊断</label>
                <input id="txtDiag" type="text" name="rec_name" placeholder="请填写" style="text-align: right;">
            </div>
            <div class="mui-input-row">
                <label>复查内容</label>
                <input type="text" placeholder="请填写" id="txtContent" class="oe-tar" />
            </div>
            <div class="mui-input-row" style="height:auto;">
                <div style="padding: 15px 11px;">复查节点(勾选复查节点，术后n个月)</div>
                <ul class="mui-table-view mui-grid-view" style="padding: 15px 11px;">
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        1
                        <input value="1" type="checkbox" checked>
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        2
                        <input value="2" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        3
                        <input value="3" type="checkbox" checked>
                    </li>
                    <li id="test" class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        4
                        <input value="4" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        5
                        <input value="5" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        6
                        <input value="6" type="checkbox" checked>
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        7
                        <input value="7" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        8
                        <input value="8" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        9
                        <input value="9" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        10
                        <input value="10" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        11
                        <input value="11" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        12
                        <input value="12" type="checkbox" checked>
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        13
                        <input value="13" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        14
                        <input value="14" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        15
                        <input value="15" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        16
                        <input value="16" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        17
                        <input value="17" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        18
                        <input value="18" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        19
                        <input value="19" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        20
                        <input value="20" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        21
                        <input value="21" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        22
                        <input value="22" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        23
                        <input value="23" type="checkbox">
                    </li>
                    <li class="mui-table-view-cell mui-col-xs-2 mui-checkbox" style="outline: 1px solid #f5f5f5;">
                        24
                        <input value="24" type="checkbox">
                    </li>
                </ul>
            </div>
            
            <div class="oe-divide-block"></div>
        
	        <ul class="mui-table-view">
		        <li id="btn-scale" class="mui-table-view-cell" data-page="../scale/home.html">
		            <a class="mui-navigate-right pat-scale">
						添加量表
		            </a>
		        </li>
		    </ul>
		    
	        <ul id="list-scale" class="mui-table-view">
		    </ul>
		    <script id="tmp-scale" type="text/html">
		    	{{each scales as v i}}
					<li class="mui-table-view-cell mui-transitioning" data-rsid = "{{v.fr_rs_id}}" data-rsname = "{{v.fr_name}}" data-node = "{{v.fr_point}}">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn mui-btn-red" data-index="{{i}}" style="transform: translate(0px, 0px);">删除</a>
						</div>
						<div class="mui-slider-handle" style="transform: translate(0px, 0px);">
							{{v.fr_name}}
						</div>
					</li>
				{{/each}}
		    </script>
		    
            <div class="oe-divide-block"></div>
            
            <div class="mui-input-row">
                <label style="position: absolute;width: auto;">患者手机号</label>
                <input type="tel" id="txtPhoto" placeholder="请填写" class="oe-tar" maxlength="11"/>
            </div>
        </form>
        
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <span>随访快码</span>
                <span class="mui-pull-right" id="spanCode"></span>
            </li>
            <li class="mui-table-view-cell">
                <span>短信内容</span>
                <span class="mui-pull-right" id="spanMsg"></span>
            </li>
        </ul>
    </div>
	
	
    <script src="../../js/mui.min.js"></script>
	<script src="../../js/app.js"></script>   
	<script src="../../js/mui.picker.min.js"></script>
    <script src="../../js/mui.poppicker.js"></script>
    <script src="../../js/lib/template.js"></script>
    <script type="text/javascript">
		(function($){
			
			var txtPhotp = document.getElementById("txtPhoto"),
		        spanCode = document.getElementById("spanCode"),
		        spanMsg = document.getElementById("spanMsg");
		        txtContent = document.getElementById("txtContent"),
		        txtName = document.getElementById("txtName"),
		        txtSurName = document.getElementById("txtSurName"),
		        txtSurTime = document.getElementById("txtSurTime"),
		        txtDiag = document.getElementById("txtDiag"),
		        dataToScale = {module: 'FO', branch: 'ADD'},
		        tmpData = {scales:[]}; // 传往量表首页的数据
		        
		    // 数组删除方法
                 Array.prototype.indexOf = function(val) {
		            for (var i = 0; i < this.length; i++) {
		                if (this[i] == val) return i;
		            }
		            return -1;
		        };
		        Array.prototype.remove = function(val) {
		            var index = this.indexOf(val);
		            if (index > -1) {
		                this.splice(index, 1);
		            }
		        };
	         
		    txtPhotp.addEventListener("keyup", function () {
	            if (this.value && this.value.length == 11) {
	                if (/^1[3|4|5|7|8]\d{9}$/.test(this.value)) {
	                    app.page.getInterCode(function (data) {
	                        spanCode.textContent = data.fast_code;
	                        spanMsg.textContent = data.sms_text;
	                    });
	                }
	            }
	        });
	        
	        $('.mui-content').on('tap', '#btn-scale', function(){
            	var self = this;
            	
            	$.openWindow({
            		url: this.dataset.page,
            		waiting: {
            			autoShow: false
            		},
            		extras: {
            			dataFromOpener: dataToScale
            		}
            	});
            });
            
            $('#list-scale').on('tap', '.mui-btn-red', function(){
            	var self = this;
            	var li = self.parentNode.parentNode;
            	$.confirm('确定删除这张量表', ' 骨医快线', ['确定', '取消'], function(e){
            		if(e.index === 0){
            			tmpData.scales.splice(self.dataset.index, 1)
            			li.parentNode.removeChild(li);
            		}else {
            			setTimeout(function() {
							$.swipeoutClose(li);
						}, 0);
            		}
            	})
            })
            
            window.addEventListener('updateScaleList',function(e){
            	tmpData.scales.push(e.detail);
            	var html = template('tmp-scale', tmpData);
            	document.getElementById("list-scale").innerHTML = html;
            })
        
	        $.plusReady(function(){
	        	var wv = plus.webview.currentWebview();
	        	dataToScale.startPageId = wv.id;
	        	
	        	// 更改返回逻辑
            	$.back = function(){
            		$.openWindow({
            			id: 'main'
            		});
            		wv.close('slide-out-left');
            	}
	        	
	        	$('body').on('tap', '#btnSave', function(){
	        		var checkedBoxs = document.querySelectorAll(".mui-grid-view :checked");
	                var checkedArray = [];
	                var self = this;
	                for (var i = 0; i < checkedBoxs.length; i++) {
	                    checkedArray.push(checkedBoxs[i].value);
	                }
	                
	                
	                var postData = {
	                	rec_name : txtName.value,
	                	rec_surgery_name : txtSurName.value,
	                	rec_surgery_date : showDateBtn.textContent,
	                	rec_diagnosis : txtDiag.value,
	                    fo_dr_id: app.storage.getUserId(),
	                    fo_patient_mobile: txtPhotp.value,
	                    fo_fast_code: spanCode.textContent,
	                    fo_review_content: txtContent.value
	                }; 
	                postData.fo_review_point = checkedArray.join();
	                
	                if (!postData.rec_name) {
	                    plus.nativeUI.toast("请输入患者姓名");
	                    return false;
	                }
	                if (!postData.rec_surgery_name) {
	                    plus.nativeUI.toast("请输入手术名称");
	                    return false;
	                }
	                if (!postData.rec_surgery_date) {
	                    plus.nativeUI.toast("请输入手术时间");
	                    return false;
	                }
	                if (!postData.fo_review_point) {
	                    plus.nativeUI.toast("请选择复查节点");
	                    return false;
	                }
	                if (!postData.fo_patient_mobile) {
	                    plus.nativeUI.toast("请输入患者手机号码");
	                    return false;
	                }
	                if (!postData.fo_review_content) {
	                    plus.nativeUI.toast("请输入复查内容");
	                    return false;
	                }
	                if(tmpData.scales.length > 0)postData.fo_review_rs = tmpData.scales;
	                
//					app.net.ajax('c_followup/create', postData, 'post', function(data){
//						app.t(data)
//					},function(msg){
//						console.log(msg)
//					}); 

	                app.net.post('c_followup/create', postData, function(data){

						if(data && data.code === '100'){
							self.setAttribute('disabled', true);
							plus.nativeUI.toast('随访添加成功');
							
							app.net.get('c_followup/send_fast_code_sms', {pa_mobile: txtPhotp.value,fast_code: spanCode.textContent, fo_id: data.data.fo_id}, function(data){
								if(data && data.code === '100'){
									$.alert('已发送邀请短信至患者手机\n请等待患者接受并绑定', '骨医快线', function(){
										var mainPage = plus.webview.getWebviewById('main');
			                        	$.fire(mainPage, 'toThird', null);
										$.openWindow(mainPage);
									});
								}
							});
						}
	                });

	        	});
	        	
	        	var showDateBtn = document.getElementById("showDateBtn");
                $('.mui-content').on('tap', '#showDateBtn', function () {
                    var optionsJson = this.getAttribute('data-options') || '{}';
                    var options = JSON.parse(optionsJson);
                    var picker = new $.DtPicker(options);
                    picker.show(function (rs) {
                        showDateBtn.textContent = rs.text;
                        picker.dispose();
                    });
                });
                
	        });
			
		}(mui));
    </script>
</body>
</html>